<template>
  <view class="fitting-add">
    <uni-popup ref="popup" background-color="#fff" :is-mask-click="false" @change="change">
      <view class="popup-content">
        <view class="top">
          <text class="close" @click="close">取消</text>
          <text class="submit" :class="{ disable: !fittingData }" @click="submit">确定</text>
        </view>
        <view class="store-content" v-if="storeInfo">
          <view class="name">
            <text v-text="storeInfo.wName" />
          </view>
          <text class="del" @click="storeInfo = null">重新选择</text>
        </view>
        <view class="data-content">
          <StoreList v-show="!storeInfo" @data-select="dataSelect" />
          <FittingList v-if="storeInfo" :store-info="storeInfo" @select-fitting-change="selectFittingChange" />
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-dialog before-close mode="input" title="请输入数量" @close="numClose" @confirm="addFitting">
        <uni-forms :modelValue="formData" ref="formData" :rules="rules">
          <uni-forms-item label="" name="fittingNum">
            <uni-easyinput type="text" v-model="formData.fittingNum" placeholder="请输入数量" />
          </uni-forms-item>
        </uni-forms>
      </uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
  import StoreList from './StoreList';
  import FittingList from './FittingList';
  import { addFitting } from '../../api/device/fitting';
  
  export default {
    name: 'FittingAdd',
    components: {
      StoreList,
      FittingList,
    },
    props: {
      workId: {
        type: [ String, Number ],
        default: '',
      },
      orderType: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        storeInfo: null,
        fittingData: null,
        formData: {
          fittingNum: '',
        },
        rules: {
          fittingNum: {
            rules: [ {
              required: true,
              errorMessage: '请输入数量',
            }, {
              validateFunction(rule, value, data, callback) {
                const reg = /^([1-9][0-9]*)$/;
                if (!reg.test(value)) {
                  callback('请输入正整数');
                }
                return true;
              },
            },
            ],
          },
        },
      };
    },
    watch: {
      storeInfo: {
        handler() {
          this.fittingData = null;
        },
      },
    },
    mounted() {
      this.$nextTick(() => {
        this.$refs.popup.open('bottom');
      });
    },
    created() {
    },
    methods: {
      dataSelect({ data }) {
        this.storeInfo = data;
      },
      selectFittingChange({ data }) {
        this.fittingData = data;
      },
      async submit() {
        console.log(this.fittingData);
        const { fittingData, workId } = this;
        if (!fittingData) {
          return;
        }
        this.$refs.inputDialog.open();
        // const param = {
        //   workId,
        //   partsCode: fittingData.parts_code,
        //   partsModel: fittingData.parts_model,
        //   workpartsNum: 0,
        // };
        // const res = await addFitting(param);
      },
      async addFitting() {
        let isSuccess = true;
        const formData = this.$refs.formData[ 0 ] || this.$refs.formData;
        const res = await formData.validate().catch(() => {
          isSuccess = false;
        });
        if (isSuccess) {
          this.numClose();
          const { fittingData, workId, formData } = this;
          const param = {
            workId,
            partsCode: fittingData.parts_code,
            partsModel: fittingData.parts_model,
            workpartsNum: formData.fittingNum,
          };
          const res = await addFitting(param, this.orderType);
          if (res.code === 200) {
            this.$emit('add-success');
            this.close();
          }
        }
      },
      numClose() {
        this.$refs.inputDialog.close();
      },
      close() {
        this.$refs.popup.close();
      },
      change(e) {
        if (!e.show) {
          setTimeout(() => {
            this.$emit('close');
          }, 1000);
        }
        console.log(e);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .fitting-add {
    &, * {
      box-sizing: border-box;
    }
    .popup-content {
      height: 80vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      .top {
        display: flex;
        justify-content: space-between;
        text {
          display: block;
          font-size: 16px;
          padding: 15px;
          line-height: 1;
          cursor: pointer;
          &.close {
            color: #cccccc;
          }
          &.submit {
            color: #007aff;
            &.disable {
              color: #eeeeee;
              cursor: not-allowed;
            }
          }
        }
      }
      .store-content {
        padding: 10px 15px;
        display: flex;
        white-space: nowrap;
        font-size: 14px;
        line-height: 1;
        .name {
          overflow: auto;
          color: black;
          flex: 1;
        }
        .del {
          margin-left: 10px;
          color: red;
        }
      }
      .data-content {
        border-top: 1px solid #cccccc;
        flex: 1;
        overflow: hidden;
      }
    }
  }
</style>
